﻿
<!doctype html>

<html lang="en">

<head>

 <meta charset="utf-8" />

 <title>HTML5 Semantic Markup Demo: Cross Browser</title>

 <link rel="stylesheet" href="html5reset.css" type="text/css" />

 <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />

 <!--[if lt IE 9]>

 <script src="html5.js"></script>

 <![endif]-->

</head>

<body>

 <header>

 <hgroup>

 <h1>Page Header</h1>

 <h2>Page Sub Heading</h2>

 </hgroup>

 </header>

 

 <nav>

 

 <ul>

 <li><a href="#">Home</a></li>

 <li><a href="#">Projects</a></li>

 <li><a href="#">Portfolio</a></li>

 <li><a href="#">Profile</a></li>

 <li><a href="#">Contact</a></li>

 

 </ul>

 </nav>

 

 <article>

 <header>

 <h1>Simple HTML5 Login Form</h1>

 <time datetime="2010-05-05" pubdate>May 5th, 2010</time>

 </header>

 

 <p>Please provide the authentication credentials to continue:</p>

 <section>

 <form action="searchservlet.do" enctype="application/x-www-form-urlencoded">

 <p>Username: <input type="text" name="username" id="username" size="25" required/></p>

 <p>Password: <input type="password" name="passwd" id="passwd" size="25" required/></p>

 <p>

 <input type="submit" name="submit" id="submit" value="Submit"/>

 <input type="reset" name="reset" id="reset" value="Reset"/>

 </p>

 </form>

 </section>

 </article>

 

 <aside>

 

 <header>

 <h1>Siderbar Heading</h1>

 </header>

 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio. Donec sit amet augue metus, nec sollicitudin est. Donec iaculis porttitor viverra. Sed sed magna ac lectus pharetra iaculis at quis tellus. Nunc quis lorem sit amet nulla viverra mattis. Aenean suscipit libero accumsan sapien fermentum non aliquet lorem rutrum.</p>

 

 </aside>

 

 <footer>

 

 </footer>

 

</body>

</html>

